<template>
	<view class="zh-user-center-login">
		<view class="header">
			<image :src="IMG_URL + '/auth/auth_top.jpg'" class="auth-top"/>
			<view class="box">
				<view class="logo">
					<image :src="IMG_URL + '/auth/logo_icon.png'" class="logo-icon"/>
				</view>
				<text class="font-36 font-FFFFFF mt-30 display-block">欢迎登录 中恒e纺</text>
			</view>
		</view>
		<view class="content">
			<view class="tags display-flex align-end">
				<view class="item active">
					<text>账号</text>
				</view>
			<!-- 	<view class="item">
					<text>验证码</text>
				</view> -->
			</view>
			<view class="username display-flex align-center">
				<image src="@/static/icons/user_icon.png" class="user-icon"/>
				<input v-model="loginData.username" placeholder="请输入用户名" class="ml-30 flex" placeholder-class="font-28"/>
			</view>
			<view class="password display-flex justify-between align-center">
				<view class="display-flex align-center">
					<image src="@/static/icons/password_icon.png" class="password-icon"/>
					<input v-model="loginData.password" placeholder="请输入密码" class="ml-30 flex" placeholder-class="font-28" :password="!lookPassord"/>
				</view>
				<view @click="handleLookPassword">
					<image src="@/static/icons/look_active_icon.png" class="look-active-icon" v-if="lookPassord"/>
					<image src="@/static/icons/look_icon.png" class="look-icon" v-else/>
				</view>
			</view>
			<!-- <view class="mt-50">
				<navigator class="font-999 font-24 pull-right" url="/pages/auth/password">忘记密码？</navigator>
			</view> -->
			<!-- <view class="clearBoth"></view> -->
			<view class="login-btn">
				<button class="app-primary-button" hover-class="app-primary-button-active"  @click="handleLogin">登录</button>
			</view>
			<view class="display-flex mt-40">
				<u-checkbox class="agree" :sizePercent="0.9" @change="changeAgree" color="#1769ff" :checked="checked"></u-checkbox>
				<view class="font-24 ml-10">
					<text>登录表示您已同意</text>
					<text class="font-1769ff" @click="navigateTo('/pages/auth/protocol')">《服务协议》</text>
					<text>和</text>
					<text class="font-1769ff" @click="navigateTo('/pages/auth/privacy')">《隐私政策》</text>
				</view>
			</view>
			<view class="register font-24" >
				<text>还没有账号? </text>
				<view hover-class="none" class="font-1769ff" @click="navigateTo('/pages/auth/register')">
					<text>立即注册</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { auth } from '@/api'
	import { tip, storage, nav } from '@/utils'
	import { useAuthStore } from '@/store/auth'
	import { useGoodsHistoryStore } from '@/store/goodsHistory'
	import { onLoad, onShow, onNavigationBarButtonTap } from '@dcloudio/uni-app';
	import { IMG_URL } from '@/utils/constant'
	const authStore = useAuthStore()
	const goodsHistoryStore = useGoodsHistoryStore()
	
	const lookPassord = ref(false)
	const handleLookPassword = () => {
		lookPassord.value = !lookPassord.value
		// setTimeout(() => {
		// 	lookPassord.value = !lookPassord.value
		// }, 300)
	}
	
	
	const loginData = reactive({
		username:'',
		password:'',
		code:'',
		uuid:''
	})
	
	const checked = ref(false)
	
	onLoad(() => {
		const userName = authStore.getUserName()
		if(userName) loginData.username = userName
	})
	
	onShow(() => {
		if(nav.isLogin()) {
			auth.logout().then(() => {
				storage.clearAllStorage(authStore,goodsHistoryStore)
			})
		}
	})
	
	onNavigationBarButtonTap((e:any) => {
		uni.switchTab({
			url:'/pages/index/index'
		})
	})
	
	const changeAgree = (e: any) => {
		checked.value = !checked.value
	}
	
	const handleLogin = () => {
		if(!checked.value) return tip.showToast("请先阅读登录协议！")
		auth.login(loginData).then((res: any) => {
			const data = res.data
			authStore.setToken(data.access_token)
			authStore.setExpiresIn(data.expires_in)
			authStore.setUserInfo()
			uni.switchTab({url:'/pages/index/index'})
		})
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.zh-user-center-login {
		//#ifdef APP-PLUS
		width:100%;
		min-height:calc(100% - var(--status-bar-height));
		//#endif
		padding-bottom:80rpx;
		background-color: $uni-bg-card-color;
		.header {
			width:100%;
			height: 396rpx;
			text-align:center;
			background-color: #e5e5e5;
			position: relative;
			.auth-top {
				width: 100%;
				height:396rpx;
				position: absolute;
				top:0;
				left:0;
				right:0;
			}
			.box {
				position:relative;
				padding-top: 94rpx;
				.logo {
					width: 104rpx;
					height: 104rpx;
					background-color: #fff;
					border-radius: 15rpx;
					text-align: center;
					margin: 0 auto;
					.logo-icon {
						width: 72rpx;
						height: 72rpx;
						margin-top:16rpx;
					}
				}
			}
		}
		.content {
			padding:43rpx 60rpx;
			.tags {
				margin-bottom:50rpx;
				.item:nth-child(2) {
					margin-left: 36rpx;
				}
				.item {
					font-size:30rpx;
					&.active {
						font-weight: bold;
						color:$uni-color-primary;
						font-size: 46rpx;
					}
					
				}
			}
			.username,.password {
				padding:25rpx 0;
				border-bottom: 1rpx solid $uni-border-color;
			}
			.user-icon {
				width: 32rpx;
				height: 35rpx;
			}
			.password-icon {
				width: 30rpx;
				height: 36rpx;
			}
			.look-icon {
				width: 45rpx;
				height: 16rpx;
			}
			.look-active-icon {
				width: 45rpx;
				height: 28rpx;
			}
			.check-box {
				width:30rpx;
				height: 30rpx;
			}
			.login-btn {
				margin-top:50rpx;
				button {
					width:630rpx;
				}
			}
			.register {
				text-align: center;
				margin-top: 190rpx;
			}
			.agree {
				margin-top:-8rpx;
			}
		}
	}
</style>
